<template>
  <div class="cain-sider">
    <a-layout-sider
      v-model:collapsed="collapsed"
      :trigger="null"
      collapsible
      width="280"
      class="cain-layout-sider"
    >
      <div class="logo">
        <!-- {{ routerx.state.sider }} -->
      </div>

      <a-menu v-model:selectedKeys="selectedKeys" theme="dark" mode="inline">
        <template v-if="true" v-for="(item, index) in routerx.state.sider">
          <a-menu-item
            v-if="!item.children"
            :key="item.path"
            @click="$router.push(item.path as any)"
          >
            <span>
              <component :is="munuicon(item.icon)"></component>
              <span>{{ item.title }}</span>
            </span>
          </a-menu-item>
          <a-sub-menu v-if="item.children" :key="'item' + index">
            <template #icon>
             <component :is="munuicon(item.icon)"></component>
            </template>
            <template #title>{{ item.title }}</template>
            <template v-if="true" v-for="(itemtags, index) in item.children">
              <a-menu-item
                v-if="!itemtags.children"
                :key="itemtags.path"
                @click="$router.push(itemtags.path as any)"
              >
                <span>
                <component :is="munuicon(itemtags.icon)"></component>
                  <span>{{ itemtags.title }}</span>
                </span>
              </a-menu-item>
              <a-sub-menu v-else>
                <template #icon>
                  <component :is="munuicon(item.icon)"></component>
                </template>
                <template #title>{{ item.title }}</template>
                <template
                  v-if="true"
                  v-for="(itemtagsl, index) in itemtags.children"
                >
                  <a-menu-item
                    v-if="!itemtagsl.children"
                    :key="itemtagsl.path"
                    @click="$router.push(itemtagsl.path as any)"
                  >
                    <span>
                     <component :is="munuicon(itemtagsl.icon)"></component>
                      <span>{{ itemtagsl.title }}</span>
                    </span>
                  </a-menu-item>
                </template>
              </a-sub-menu>
            </template>
          </a-sub-menu>
        </template>
      </a-menu>
    </a-layout-sider>
    <div class="cain-layout-sider-mobil">
      <div class="cain-layout-sider-mobil-box" @click="visible = !visible">
        <unordered-list-outlined />
      </div>
      <a-drawer
        v-model:visible="visible"
        class="custom-class"
        placement="left"
        :bodyStyle="{ padding: 0 }"
        :closable="false"
        @after-visible-change="afterVisibleChange"
        width="280"
      >
        <a-layout-sider
          class="cain-layout-sider"
          width="280"
          style="height: 100vh"
        >
          <!-- <div style="width: 280px; height: 100vh; max-width: 280px"> -->
          <div class="logo">cain-通用后台管理</div>
          <a-menu
            v-model:selectedKeys="selectedKeys"
            theme="dark"
            mode="inline"
          >
            <template v-if="true" v-for="(item, index) in MenuList">
              <a-menu-item
                v-if="!item.children"
                :key="item.path"
                @click="$router.push(item.path as any)"
              >
                <span>
                  <component :is="item.icon"></component>
                  <span>{{ item.title }}</span>
                </span>
              </a-menu-item>
              <a-sub-menu v-if="item.children" :key="item.path">
                <template #icon>
                  <component :is="item.icon"></component>
                </template>
                <template #title>{{ item.title }}</template>
                <template
                  v-if="true"
                  v-for="(itemtags, index) in item.children"
                >
                  <a-menu-item
                    v-if="!itemtags.children"
                    :key="itemtags.path"
                    @click="$router.push(itemtags.path as any)"
                  >
                    <span>
                      <component :is="itemtags.icon"></component>
                      <span>{{ itemtags.title }}</span>
                    </span>
                  </a-menu-item>
                  <a-sub-menu v-else>
                    <template #icon>
                      <component :is="item.icon"></component>
                    </template>
                    <template #title>{{ item.title }}</template>
                    <template
                      v-if="true"
                      v-for="(itemtagsl, index) in itemtags.children"
                    >
                      <a-menu-item
                        v-if="!itemtagsl.children"
                        :key="itemtagsl.path"
                        @click="$router.push(itemtagsl.path as any)"
                      >
                        <span>
                          <component :is="itemtagsl.icon"></component>
                          <span>{{ itemtagsl.title }}</span>
                        </span>
                      </a-menu-item>
                    </template>
                  </a-sub-menu>
                </template>
              </a-sub-menu>
            </template>
          </a-menu>
          <!-- </div> -->
        </a-layout-sider>
      </a-drawer>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {
  DashboardOutlined,
  WarningOutlined,
  UngroupOutlined,
  DatabaseOutlined,
  UnorderedListOutlined,
  VerifiedOutlined,
} from "@ant-design/icons-vue";
import { ref, defineProps, toRefs } from "vue";
import routerx from "../../store/modules/route";
import { useRoute } from "vue-router";
import { Menu } from "../../types/utils.interface";
// 获取props，并用toRefs赋予响应式
const props = defineProps({
  collapsed: {
    type: Boolean,
    default: false,
  },
});

const munuiconlist = ref([
  DashboardOutlined,
  WarningOutlined,
  UngroupOutlined,
  DatabaseOutlined,
  UnorderedListOutlined,
  VerifiedOutlined,
]);
const munuicon = (icon: string) => {
  let vicon = null;
  const data = munuiconlist.value.forEach((v) => {
    if (v.name === icon + "3") {
      vicon = v;
    }
  });
  return vicon;
};
// console.log(munuicon(routerx.state.sider[0].icon));
const { collapsed } = toRefs(props);
const visible = ref<boolean>(false);
const route = useRoute();
const afterVisibleChange = (bool: boolean) => {
  console.log("visible", bool);
};
const selectedKeys = ref<string[]>([`${route.path}`]);

const showDrawer = () => {
  visible.value = true;
};

// 生成动态侧边栏
const MenuList = ref<Menu[]>([
  {
    icon: DashboardOutlined,
    title: "控制台",
    path: "/",
  },
  {
    icon: WarningOutlined,
    title: "异常页",
    children: [
      {
        title: "401",
        path: "/error/401",
      },
      {
        title: "403",
        path: "/error/403",
      },
      {
        title: "404",
        path: "/error/404",
      },
    ],
  },
  {
    icon: UngroupOutlined,
    title: "多级导航",
    children: [
      {
        title: "二级导航",
        icon: UngroupOutlined,
        children: [
          {
            title: "三级导航",
            path: "/asdas",
          },
        ],
      },
    ],
  },
  {
    title: "项目管理",
    icon: DatabaseOutlined,
    children: [
      {
        title: "项目列表",
        path: "/project/list",
      },
    ],
  },
  {
    title: "权限管理",
    icon: VerifiedOutlined,
    children: [
      {
        title: "指令管理",
        path: "/jurisdiction",
      },
    ],
  },
]);

// 处理侧边栏
</script>

<style lang="scss" scoped>
.cain-sider {
  .cain-layout-sider-mobil {
    display: none;
    .cain-layout-sider-mobil-box {
      width: 40px;
      height: 40px;
      background-color: #fff;
      border: 1px #daeaef solid;
      position: fixed;
      top: 300px;
      z-index: 10;
      display: flex;
      align-items: center;
      justify-content: center;
      .cain-layout-sider {
        height: 100vh;
        overflow: hidden;
        overflow-y: auto;
      }
    }
  }
  @media screen and (max-width: 930px) {
    .cain-layout-sider {
      display: none;
    }
    .cain-layout-sider-mobil {
      display: block;
    }
  }

  .cain-layout-sider {
    height: 100vh;
    overflow: hidden;
    overflow-y: auto;
    .logo {
      text-align: center;
      height: 32px;
      background: rgba(255, 255, 255, 0.3);
      margin: 16px;
    }
    .cain-menu-item {
      .menuitem {
        display: flex;
        align-items: center;
        gap: 10px;
        svg {
          width: 20px !important;
          height: 20px !important;
        }
      }
    }
  }
}
</style>
